<template>
  <div>
    <div class="main">
      <div class="content">
        <div class="subText" style="color: #3bdaff;">总人数：{{ spread_total }}</div>
        <div id="spreadDom">
        </div>
      </div>
      <div class="content">
        <div class="subText" style="color: #009eff;">总订单：{{ order_total }}</div>
        <div id="orderDom">
        </div>
      </div>
      <div class="content">
        <div class="subText" style="color: #0072fe;">总订单：{{ area_total }}</div>
        <div id="areaDom">
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import echarts from 'echarts';
import { treamStatsticApi } from '@/api/user'

export default {
  name: 'treamStatistics',
  components: {
  },
  data() {
    return {
      spread: null,
      order: null,
      area: null,
      spreadData: [],
      orderData: [],
      areaData: [],
      spread_total: 0,
      order_total: 0,
      area_total: 0
    }
  },
  methods: {
    spreadInit() {
      this.spread = echarts.init(document.getElementById('spreadDom'))
      const spreadList = this.spreadData.sort((a, b) => { return a.people - b.people })
      const option = {
        title: {
          text: '推广创客排名'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          minInterval: 2
        },
        yAxis: {
          type: 'category',
          data: spreadList.map((item) => { return item.district }),
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              color: '#3bdaff',
            },
            barWidth: '24',   // 设置
            label: {
              show: true, // 显示标签
              position: 'right', // 将标签放置于柱子的顶部位置
              formatter: (params) => { return params.value + '人' }
            },
            data: spreadList.map((item) => { return item.people })
          },
        ]
      };
      let height = 0;
      if (this.spreadData.length > 18) {
        height = this.spreadData.length * 40;
        this.spread.resize({ height: height });
      }
      // 基于准备好的dom，初始化echarts实例
      this.spread.setOption(option, true)
    },
    orderInit() {
      this.order = echarts.init(document.getElementById('orderDom'))
      const orderList = this.spreadData.sort((a, b) => { return a.order - b.order })
      const option = {
        title: {
          text: '线上订单销售排名'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          minInterval: 2
        },
        yAxis: {
          type: 'category',
          data: orderList.map((item) => { return item.district }),
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              color: '#009eff',
            },
            barWidth: '24',   // 设置
            data: orderList.map((item) => { return item.order }),
            label: {
              show: true, // 显示标签
              position: 'right', // 将标签放置于柱子的顶部位置
              formatter: (params) => { return params.value }
            },
          },
        ]
      };

      let height = 0;
      if (this.orderData.length > 18) {
        height = this.orderData.length * 40;
        this.order.resize({ height: height });
      }
      // 基于准备好的dom，初始化echarts实例
      this.order.setOption(option, true)
    },
    areaInit() {
      this.area = echarts.init(document.getElementById('areaDom'))
      const areaList = this.spreadData.sort((a, b) => { return a.job - b.job })
      const option = {
        title: {
          text: '地推销售排名'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          minInterval: 2
        },
        yAxis: {
          type: 'category',
          data: areaList.map((item) => { return item.district }),
          minInterval: 2
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              color: '#0072fe',
            },
            barWidth: '24',   // 设置
            data: areaList.map((item) => { return item.job }),
            label: {
              show: true, // 显示标签
              position: 'right', // 将标签放置于柱子的顶部位置
              formatter: (params) => { return params.value }
            },
          },
        ]
      };

      let height = 0;
      if (this.spreadData.length > 18) {
        this.order.resize({ height: height });
      }
      this.area.setOption(option, true)
    },
    wsFunc() {
      if (this.spreadData.length > 18) {
        height = this.spreadData.length * 40;
        this.area.resize({ height: height });
        this.spread.resize({ height: height });
        this.order.resize({ height: height });
      } else {
        this.area.resize();
        this.spread.resize();
        this.order.resize()
      }
    },
    async getStatictis() {
      treamStatsticApi().then((res) => {
        this.order_total = res.data.order_total
        this.spread_total = res.data.user_total
        this.area_total = res.data.job_total
        this.spreadData = res.data.district
        this.spreadInit();
        this.orderInit();
        this.areaInit();
        window.addEventListener('resize', this.wsFunc)
      })
    }

  },
  async mounted() {
    await this.getStatictis()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.wsFunc)
    if (this.spread) {
      this.spread.dispose()
      this.spread = null
    }

    if (this.order) {
      this.order.dispose()
      this.order = null
    }
    if (this.area) {
      this.area.dispose()
    }
  },
}
</script>
<style lang="scss" scoped>
.main {
  padding: 16px 0;
  display: flex;
  justify-content: space-around;

  .content {
    position: relative;
    width: 32%;

    .subText {
      position: absolute;
      top: 2px;
      right: 16px;
      font-size: 18px;
      z-index: 9;
      font-weight: bold;
    }

    #spreadDom,
    #orderDom,
    #areaDom {
      width: 100%;
      height: 800px;
    }
  }


}
</style>